<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>梁又文-前端开发-2020</title>
    <link rel="stylesheet" href="mode.css">
    <style media="print">
        body {
            margin: 0;
        }

        .page2 {
            page-break-before: always;
            margin-top: -120px;
        }
    </style>
</head>

<body>
    <div class="layout" id="page">
        <header>
            <h1>梁又文</h1>
            <p>应聘前端工程师</p>
        </header>
        <aside>
            <div class="avatar">
                <img src="./images/picture.png" alt="梁又文">
            </div>

            <section>
                <h2>基础信息</h2>
                <div class="detail personal">
                    <div class="item">
                        <span>学历</span>
                        <span>本科</span>
                    </div>
                    <div class="item">
                        <span>年龄</span>
                        <span>21岁</span>
                    </div>
                    <div class="item">
                        <span>性质</span>
                        <span>全职</span>
                    </div>
                    <div class="item">
                        <span>前端经验</span>
                        <span>1.5年</span>
                    </div>
                    <!-- <div class="item">
                        <span>期望薪资</span>
                        <span>7~10k</span>
                    </div> -->
                </div>
            </section>

            <section>
                <h2>专业技能</h2>
                <div class="detail skills">
                    <div class="item">
                        <span class="keyword">静态页面</span>
                        <span class="rule"><i style="width: 100%"></i></span>
                    </div>
                    <div class="item">
                        <span class="keyword">Vue</span>
                        <span class="rule"><i style="width: 80%"></i></span>
                    </div>
                    <div class="item">
                        <span class="keyword">Node.js</span>
                        <span class="rule"><i style="width: 60%"></i></span>
                    </div>
                    <div class="item">
                        <span class="keyword">TypeScript</span>
                        <span class="rule"><i style="width: 60%"></i></span>
                    </div>
                    <div class="item">
                        <span class="keyword">Webpack</span>
                        <span class="rule"><i style="width: 70%"></i></span>
                    </div>
                </div>
            </section>

            <section>
                <h2>联系方式</h2>
                <div class="detail contact">
                    <div class="item">
                        <svg>
                            <use xlink:href="#icon-phone" /></svg>
                        <span>15011756892</span>
                    </div>
                    <div class="item">
                        <svg>
                            <use xlink:href="#icon-email" /></svg>
                        <span>layouwen@gmail.com</span>
                    </div>
                    <div class="item">
                        <svg>
                            <use xlink:href="#icon-wechat" /></svg>
                        <span>gdgzyw</span>
                    </div>
                    <div class="item">
                        <svg>
                            <use xlink:href="#icon-city" /></svg>
                        <span>广州</span>
                    </div>

                </div>
            </section>
            <section>
                <h2>相关链接</h2>
                <div class="">
                    <div class="item">
                        github链接(已有 411 次提交)<br><a href="https://github.com/layouwen/">github.com/layouwen</a>
                    </div>
                    <div class="item">
                        博客链接（目前有 37 篇文章）<br>
                        <a href="https://www.yuque.com/waver-klavd/lyw">yuque.com/waver-klavd/lyw</a>
                    </div>
                </div>
            </section>
        </aside>
        <main>
            <section>
                <h2>教育经历</h2>
                <div class="item">
                    <p>
                        <span>2020.04~至今</span>
                        <span>华南理工大学</span>
                        <span>计算机科学与技术</span>
                        <span>本科</span>
                    </p>
                    <p>
                        <span>2016.09~至今</span>
                        <span>广州市机电技师学院</span>
                        <span>计算机网络技术</span>
                        <span>大专</span>
                    </p>
                </div>
            </section>

            <section>
                <h2>技能概述</h2>
                <ul>
                    <li>熟练 HTML5 和 CSS3 进行符合Web标准的开发，有像素级还原设计稿的能力</li>
                    <li>熟悉 PC与移动端开发与适配，了解小程序开发及流程</li>
                    <li>熟悉 JavaScript / TypeScript，掌握 ES6 语法，持续关注ECMAScript标准</li>
                    <li>熟悉 Vue 技术栈，包括 VueCli、VueRouter、Vuex等</li>
                    <li>熟悉 AJAX 相关知识，了解 HTTP 协议</li>
                    <li>熟悉 Webpack / Parcel 对项目进行打包，熟悉前端工程化流程</li>
                    <li>掌握 jQuery、Less、Sass、Bootstrap 等技术</li>
                    <li>掌握 ECharts 能使用其进行简单的数据可视化需求</li>
                    <li>掌握 Git版本管理工具，活跃于GitHub社区</li>
                    <li>了解 单元测试、持续集成以及 Travis 相关知识。能使用 Travis 进行持续测试。</li>
                    <li>熟练 Markdown 语法，编写技术文档发布博客</li>
                </ul>
            </section>
            
            <section>
                <h2>项目经历</h2>
                <div class="item">
                    <div>
                        <h3>易新账本</h3>
                        <span>2020-4-10 ~ 2020-5-18</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            易新小账本是一款简约风的记账应用。其特点为简洁，一键快速记账。<br>
                            也是一款基于 <strong>Vue</strong> 、<strong>VueRouter</strong> 、<strong>Vuex</strong> <strong>、TypeScript</strong> 的单页面应用。
                            从设计至完成，借鉴参考了多款 AppStore 中的类似应用。最终使其最简化。<br>
                            本项目期间遇到很多问题，如 <strong>webpack配置</strong> ，TypeScript 等问题。最终都记录在博客中。
                        </li>
                        <li>项目源码：github.com/Layouwen/YiXin</li>
                        <li>预览项目：<a href="https://layouwen.github.io/YiXin-website">点击查看</a></li>
                    </ul>
                </div>
                <div class="item">
                    <div>
                        <h3>易新UI组件</h3>
                        <span>2020-5-3 ~ 2020-7-20</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            Yixin-UI 是一款基于 <strong>Vue</strong> 技术栈开发的一套简洁的 UI 框架<br>
                            该框架参考了 Element、Ant Design 的 UI 界面及 API 设计，适应了 <strong>PC 端</strong>与<strong>移动端</strong><br>
                            目前已经完成 Button、Input、Tab、Toast、Collapse 等 <strong>8 个</strong> UI 组件。<br>
                            采用 <strong>Chai</strong>、<strong>Karma</strong>、<strong>Sinon</strong> 等框架编写 <strong>BDD 模式</strong>的测试用例，并部署<strong>Travis CI</strong>持续集成服务<br>
                            使用 Vue 生态产品 <strong>VuePress</strong> 搭建其使用文档
                        </li>
                        <li>项目源码：https://github.com/Layouwen/Yixin-UI</li>
                        <li>预览项目：<a href="https://layouwen.github.io/Yixin-UI">点击查看</a></li>
                    </ul>
                </div>
                <div class="item page2">
                    <div>
                        <h3>易新翻译(小程序)</h3>
                        <span>2020-7-1 ~ 2020-7-8</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            易新翻译是一款简单的翻译 <strong>小程序</strong> 。<br>
                            使用 <strong>原生JS</strong> 制作的一个小程序应用。了解其标签语法，数据绑定及其布局方式。并调用 <strong>百度翻译API</strong> 实现翻译效果。 
                        </li>
                        <li>项目源码：github.com/Layouwen/Yixin-fanyi</li>
                        <li>预览项目：<a href="javascript:;" onclick="alert('小程序搜索：易新翻译')">点击查看</a></li>
                    </ul>
                </div>
                <div class="item ">
                    <div>
                    <h3>艺简导航页</h3>
                        <span>2020-6-4 ~ 2020-6-21</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            这是一个基于 <strong>jQuery</strong> 的PC端、移动端 <strong>适配</strong> 的导航页。<br>
                            根据个人需求，借鉴各大导航网站设计的一个简单快捷的 导航 页面。并添加 <strong>键盘事件监听</strong> ， PC端 可以根据相应的 <strong>按键跳转</strong> 对于的网站。
                            并使用 <strong>localstorage</strong> 存储数据，记录保存的记录。
                        </li>
                        <li>项目源码：github.com/Layouwen/YJ-nav</li>
                        <li>预览项目：<a href="http://layouwen.gitee.io/yj-nav/src/index.html">点击查看</a></li>
                    </ul>
                </div><div class="item">
                    <div>
                    <h3>皮卡皮卡</h3>
                        <span>2020-3-16 ~ 2020-3-21</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            这是一个使用 <strong>CSS</strong> ，根据模板图尽可能 <strong>还原</strong> 图片的效果。<br>
                            并使用 <strong>原生JS</strong> 实现， <strong>播放</strong> 绘画过程的效果。<br>
                            通过这个项目，使自己对CSS的使用更加熟练。
                        </li>
                        <li>项目源码：github.com/Layouwen/Pikachu</li>
                        <li>预览项目：<a href="https://layouwen.gitee.io/pikachu/src/index.html">点击查看</a></li>
                    </ul>
                </div>
                <div class="item">
                    <div>
                        <h3>艺术时间</h3>
                        <span>2020-3-10 ~ 2020-3-14</span>
                    </div>
                    <ul>
                        <li>项目介绍：<br>
                            这是一个使用 <strong>canvas</strong> 和 <strong>原生JS</strong> 实现的PC端、手机端 <strong>自适应</strong> 一个简易 <strong>画板</strong> 。<br>
                            可用于日常草稿、涂鸦。有3种颜色的画笔，以及3种粗细选择。<br>
                            添加可选择白底或黑底。以及窗口 <strong>变化检测</strong>。
                        </li>
                        <li>项目源码：github.com/Layouwen/Art-Time</li>
                        <li>预览项目：<a href="https://layouwen.gitee.io/art-time/index.html">点击查看</a></li>
                    </ul>
                </div>
            
            </section>
            <section>
                <h2>获奖情况</h2>
                <div class="item">
                    <ul>
                        <li>2020年广州市广播电视大学 奖学金</li>
                        <li>2018-2019年度广州市社会保障局 优秀共青团员</li>
                        <li>2019年广州市广播电视大学 优秀学生</li>
                        <li>2019年广州市机电技师学院计算机技能节 中文、英文组一等奖</li>
                        <li>2018-2019学年广州市机电技师学院第一学期、第二学期 二等奖 奖学金</li>
                        <li>2017-2018学年广州市机电技师学院第二学期 二等奖 奖学金</li>
                        <li>2016-2017学年、2017-2018学年广州市机电技师学院 三好学生</li>
                        <li>2016年度广州市机电技师学院 优秀共青团干部</li>
                    </ul>
                </div>
            </section>
        </main>
    </div>
    <svg style="display:none">
        <symbol id="icon-phone" viewBox="0 0 1024 1024">
            <path
                d="M493.3778059 449.15009529c16.29441978 4.65554869 32.58883953 13.96664542 41.8999369 27.93329083 9.31109674 13.96664542 13.96664542 32.58883953 9.31109673 51.21103365-2.32777434 6.98332303 0 16.29441978 4.65554869 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887109h4.65554804c6.98332303 0 11.63887108-2.32777434 16.29441978-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219412 13.96664542-67.50545341-30.26106518-135.01090681-95.43874491-148.97755159h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329149 23.27774215-2.32777434 6.98332303 0 16.29441978 4.65554869 23.27774279 2.32777434 9.31109674 9.31109674 13.96664542 16.29441977 13.96664543z"
                fill="#FE5F5F"></path>
            <path
                d="M525.96664542 346.72802801c39.57216256 9.31109674 72.1610021 32.58883953 93.11096991 65.17767906 20.94996846 34.91661388 30.26106518 74.48877579 20.94996845 114.06093836-2.32777434 16.29441978 6.98332303 32.58883953 23.27774279 34.91661387h4.65554805c6.98332303 0 11.63887108-2.32777434 16.29441977-4.65554868 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219411 11.63887108-55.86658233 0-111.73316403-30.2610652-158.28864897s-76.81655015-79.14432448-130.35535811-90.78319557h-4.6555487c-13.96664542 0-25.60551651 9.31109674-27.93329085 23.27774215-2.32777434 16.29441978 9.31109674 32.58883953 23.27774218 34.91661388zM623.73316403 640.02758378c-6.98332303-4.65554869-13.96664542-9.31109674-16.29441978-9.31109674-4.65554869-2.32777434-6.98332303-2.32777434-11.63887107-2.32777433-16.29441978 0-30.26106518 9.31109674-48.8832593 25.60551649-9.31109674 9.31109674-18.6221941 20.94996846-23.2777428 27.9332915-2.32777434 2.32777434-6.98332303 4.65554869-9.31109673 4.65554803-2.32777434 0-6.98332303-2.32777434-9.31109738-4.65554803-34.91661388-32.58883953-69.83322774-74.48877579-97.76651859-121.04426139-27.93329084-46.55548495-51.21103364-95.43874424-67.50545277-141.99422921-2.32777434-6.98332303 2.32777434-13.96664542 6.98332239-16.29441977 6.98332303-2.32777434 44.22771062-18.6221941 44.22771062-18.6221941 20.94996846-11.63887108 44.22771062-23.27774279 34.91661387-62.84990473-6.98332303-39.57216256-18.6221941-76.81655015-30.26106519-102.42206728-9.31109674-18.6221941-20.94996846-25.60551651-30.26106519-30.26106518-4.65554869-2.32777434-9.31109674-2.32777434-13.96664542-2.32777435-11.63887108 0-20.94996846 2.32777434-34.91661388 9.31109674-9.31109674 4.65554869-93.11096991 44.22771062-93.1109699 148.97755222 0 23.27774279 2.32777434 141.9942292 90.78319556 281.6606847 51.21103364 81.47209883 107.07761533 137.33868115 176.91084307 179.23861743 18.6221941 11.63887108 34.91661388 20.94996846 53.53880799 25.6055165 16.29441978 4.65554869 34.91661388 6.98332303 51.21103364 6.98332303 60.52213037 0 97.76651859-37.24438822 102.42206728-39.57216256 16.29441978-16.29441978 25.60551651-32.58883953 25.60551651-46.55548494 0-23.27774279-18.6221941-41.89993628-27.93329085-53.53880736-32.58883953-32.58883953-69.83322774-55.86658233-72.16100208-58.19435667z"
                fill="#FE5F5F"></path>
            <path
                d="M570.19435602 204.73379879h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329148 23.27774218-2.32777434 6.98332303 0 16.29441978 4.65554868 23.27774278 4.65554869 6.98332303 11.63887108 11.63887108 18.62219412 11.63887109 60.52213037 11.63887108 111.73316403 48.88325931 146.64977789 102.42206728 34.91661388 53.53880798 46.55548495 116.3887127 32.58883953 179.23861741-2.32777434 6.98332303 0 16.29441978 4.65554868 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887108h4.65554806c6.98332303 0 11.63887108-2.32777434 16.29441976-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887171-18.62219409 30.26106518-160.61642332-69.83322774-316.57729858-225.79410301-349.16613749z"
                fill="#FE5F5F"></path>
        </symbol>
        <symbol id="icon-wechat" viewBox="0 0 1024 1024">
            <path
                d="M566.49955555 633.856c0-89.88444445 78.62044445-161.67822222 183.52355556-172.94222222 0-1.024 0.11377778-1.93422222 0.11377778-2.95822223 0-156.44444445-161.90577778-283.19288889-361.58577778-283.19288888S27.07911111 301.51111111 27.07911111 457.95555555c0 71.56622222 88.51911111 179.08622222 105.13066667 198.656 1.59288889 1.93422222 2.16177778 4.66488889 1.36533333 7.168l-28.21688889 87.72266667c-2.27555555 6.94044445 5.23377778 12.40177778 9.78488889 7.28177778l59.73333334-67.92533333c1.59288889-1.82044445 3.98222222-2.50311111 6.144-1.59288889 21.39022222 8.30577778 136.30577778 51.88266667 207.64444444 51.88266667 70.656 0 136.53333333-15.92888889 192.28444444-43.34933334-9.216-19.79733333-14.44977778-41.30133333-14.44977778-63.94311111z"
                fill="#00BF27"></path>
            <path
                d="M245.07733333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z"
                fill="#FFFFFF"></path>
            <path
                d="M463.18933333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z"
                fill="#FFFFFF"></path>
            <path
                d="M589.48266667 633.856c0 81.92 84.76444445 148.36622222 189.32622222 148.36622222 37.31911111 0 97.50755555-22.75555555 108.77155556-27.19288889 1.13777778-0.45511111 2.38933333-0.11377778 3.18577777 0.91022222l31.28888889 35.61244445c2.38933333 2.73066667 6.37155555-0.22755555 5.12-3.75466667l-14.79111111-45.96622222c-0.45511111-1.25155555-0.11377778-2.73066667 0.68266667-3.75466666 8.64711111-10.24 55.06844445-66.56 55.06844444-104.10666667 0-81.92-84.76444445-148.36622222-189.32622222-148.36622223s-189.32622222 66.33244445-189.32622222 148.25244445z"
                fill="#00BF27"></path>
            <path
                d="M817.83466667 602.79466667a20.70755555 18.09066667 90 1 0 36.18133333 0 20.70755555 18.09066667 90 1 0-36.18133333 0Z"
                fill="#FFFFFF"></path>
            <path
                d="M703.71555555 602.79466667a20.70755555 18.09066667 90 1 0 36.18133334 0 20.70755555 18.09066667 90 1 0-36.18133334 0Z"
                fill="#FFFFFF"></path>
        </symbol>
        <symbol id="icon-city" viewBox="0 0 1024 1024">
            <path
                d="M466.66248369 707.35400192S260.32464969 515.07403426 260.32464969 373.27295196a256.74481032 256.74481032 0 1 1 513.48962143 0c0 141.80108308-206.01425068 333.75746741-206.01425068 333.75746741a70.46909775 70.46909775 0 0 1-101.13753674 0.35953591zM517.03350665 469.59270374a96.28379843 96.28379843 0 1 0 0-192.56759686 96.28379843 96.28379843 0 0 0 0 192.56759686z"
                fill="#F5A623"></path>
            <path
                d="M392.99351299 702.28454114a33.86831117 33.86831117 0 0 0-0.82693344 7.47835364c0 36.42101824 58.99989261 65.90298787 131.80597649 65.90298786S655.81448589 746.18391301 655.81448589 709.76289478c0-2.51675371-0.28762919-5.03350665-0.82693345-7.47835364 79.2417816 18.94755878 132.66886331 54.54164357 132.66886331 95.34900413 0 60.68971286-118.07169271 109.87426723-263.68385971 109.87426723S260.32464969 858.32325813 260.32464969 797.63354527c0-40.80736056 53.39112757-76.40144534 132.6688633-95.34900413z"
                fill="#F5A623"></path>
        </symbol>
        <symbol id="icon-email" viewBox="0 0 1295 1024">
            <path
                d="M946.99116042 255.72468923A30.15003667 30.15003667 0 0 0 919.55462687 236.12716542L256.253822 233.11216159a30.15003667 30.15003667 0 0 0-27.13503282 18.3915226 44.92355456 44.92355456 0 0 0-3.01500326 20.20052411v472.14957277A47.63705768 47.63705768 0 0 0 269.51983855 798.42534744h637.07027251A47.63705768 47.63705768 0 0 0 949.70466355 743.85378107V271.7042083a45.52655544 45.52655544 0 0 0-2.71350313-15.97951907z"
                fill="#38B1E7"></path>
            <path
                d="M929.20263868 750.48678906l-201.40224422-291.85235368a30.15003667 30.15003667 0 0 0-24.12002957-12.96451582l-226.12527412-4.22100503a30.15003667 30.15003667 0 0 0-25.32603076 12.96451583L246.90731091 750.48678906a30.15003667 30.15003667 0 0 0-2.11050279 30.15003666 30.15003667 30.15003667 0 0 0 26.5320325 17.78852172h633.1507682a30.15003667 30.15003667 0 0 0 26.83353211-16.28101982 30.15003667 30.15003667 0 0 0-2.11050224-31.65753856z"
                fill="#299ACC"></path>
            <path
                d="M947.29266058 247.28267916A31.65753859 31.65753859 0 0 0 919.55462687 225.57465256H256.253822a30.15003667 30.15003667 0 0 0-27.73803314 18.39152204A30.15003667 30.15003667 0 0 0 235.14879687 276.52821421l260.79781595 254.46630871a138.99166868 138.99166868 0 0 0 189.34223003 0l255.37080975-250.24530367a30.15003667 30.15003667 0 0 0 6.63300798-33.46654009z"
                fill="#6AC1E7"></path>
        </symbol>
    </svg>
</body>

</html>